<template>
  <div class="container">
    <div class="coupon-list">
      <div
        v-for="(item, index) in couponList"
        :class="{ 'coupon-cell': true, disabled: item.usedSpecId !== -1 }"
      >
        <div class="main-text">
          <div class="price">￥{{ item.minus.split(".")[0] }}</div>
          <div class="condition">满{{ item.meet }}可用</div>
        </div>
        <div class="coupon-info">
          <div class="title">
            {{ item.coupon_name }}
          </div>
          <div class="expire">{{ item.stop_at.split(" ")[0] }}前有效</div>
        </div>
        <button
          @click="useCoupon(item, index)"
          :disabled="statusCheck(item) === 2"
          :class="{ 'btn-disabled': item.usedSpecId !== -1 }"
        >
          {{
            item.usedSpecId !== -1
              ? statusCheck(item) === 2
                ? "已被使用"
                : "取消使用"
              : "使用优惠"
          }}
        </button>
      </div>
      <div class="no-coupon" v-if="!couponList.length">
        <img src="@/assets/待入账收益-assets/no_message.png" alt="" />
        <div class="text">暂无优惠券</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      couponList: [],
      spec_id: null
    };
  },
  computed: {
    ...mapState({
      paymentCouponList: state => state.coupon.paymentCouponList,
      currentCoupon: state => state.coupon.currentCoupon,
      currentSpec_id: state => state.coupon.currentSpec_id
    })
  },
  methods: {
    ...mapMutations(["setCouponUsed"]),
    useCoupon(item, index) {
      this.couponList.forEach(cp => {
        if (cp.usedSpecId !== -1 && cp.usedSpecId === this.spec_id) {
          if (cp.id === item.id) {
          } else {
            cp.usedSpecId = -1;
            this.setCouponUsed({ id: cp.id, spec_id: -1 });
          }
          return;
        }
      });
      if (this.spec_id === item.usedSpecId) {
        this.couponList[index].usedSpecId = -1;
        this.setCouponUsed({ id: item.id, spec_id: -1 });
      } else {
        this.couponList[index].usedSpecId = this.spec_id;
        this.setCouponUsed({ id: item.id, spec_id: this.spec_id });
        this.$router.go(-1);
      }
      this.$forceUpdate();
    },
    statusCheck(item) {
      if (item.usedSpecId === -1) {
        return 1;
      } else if (item.usedSpecId !== this.spec_id) {
        return 2;
      } else {
        return 3;
      }
    }
  },
  created() {
    this.spec_id = this.currentSpec_id;
    let arr = [];
    this.currentCoupon.forEach(item => {
      arr.push(this.paymentCouponList[item.id]);
    });
    this.couponList = arr;
  },
  components: {}
};
</script>

<style lang="less" scoped>
.no-coupon {
  text-align: center;
  padding-top: 3rem;

  img {
    height: 4rem;
  }

  .text {
    color: rgba(68, 68, 68, 1);
    font-size: 0.58rem;
  }
}
.container {
  min-height: 100%;
  height: auto;

  .coupon-list {
    padding: 0.48rem;

    .coupon-cell {
      overflow: hidden;
      height: 3.8rem;
      background-image: url("../../assets/我的优惠券-assets/1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
      display: flex;
      margin-bottom: 0.48rem;

      .main-text {
        width: 28%;
        text-align: center;
        color: rgba(255, 255, 255, 1);

        .price {
          font-size: 1rem;
          margin: 0.7rem 0 0.5rem 0;
        }

        .condition {
          color: rgba(255, 255, 255, 1);
          font-size: 0.58rem;
        }
      }

      .coupon-info {
        width: 50%;
        padding: 0.6rem 3.2%;

        .title {
          color: rgba(68, 68, 68, 1);
          font-size: 0.58rem;
          height: 1.6rem;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 行数*/
          -webkit-box-orient: vertical;
        }

        .expire {
          color: rgba(153, 153, 153, 1);
          font-size: 0.48rem;
          margin-top: 0.4rem;
        }
      }

      button {
        position: absolute;
        display: inline-block;
        background: rgba(248, 88, 89, 1);
        height: 1rem;
        border-radius: 0.5rem;
        line-height: 1rem;
        color: #fff;
        font-size: 0.48rem;
        border: none;
        padding: 0 0.24rem;
        right: 2.2%;
        top: 1.4rem;
      }

      .btn-disabled {
        background: rgba(204, 204, 204, 1);
        right: 2.2%;
      }
    }

    .disabled {
      background-image: url("../../assets/我的优惠券-assets/21.png");
    }
  }
}
</style>
